<div style="width: 700px">
  <d-transfer
    [customSourceCheckedLen]="sourceCheckedLen"
    [customTargetCheckedLen]="targetCheckedLen"
    (transferToTarget)="transferToTarget()"
    (transferToSource)="transferToSource()"
    [titles]="{ source: 'Source', target: 'Target' }"
  >
    <ng-template #sourceTemplate>
      <div class="title">Customize Header</div>
      <div class="line"></div>
      <div class="content" style="height: 320px; overflow: auto">
        <d-data-table
          #sourceTable
          [dataSource]="basicDataSource"
          [checkable]="true"
          (rowCheckChange)="sourceRowCheckChange($event)"
          (checkAllChange)="sourceCheckAllChange()"
          (pageIndexChange)="sourceChangePageContent($event)"
        >
          <d-column [order]="1" field="id" header="ID" [width]="'50px'"></d-column>
          <d-column [order]="2" field="firstName" header="Name" [width]="'80px'"></d-column>
          <d-column
            [order]="3"
            field="dob"
            header="Date of birth"
            [fieldType]="'date'"
            [extraOptions]="{ dateFormat: 'MM/DD/YYYY' }"
            [width]="'100px'"
          ></d-column>
          <d-column [order]="4" field="gender" header="Gender" [width]="'100px'"></d-column>
        </d-data-table>
      </div>
    </ng-template>
    <ng-template #targetTemplate>
      <div class="title">Customize Header</div>
      <div class="line"></div>
      <div class="content" style="height: 320px; overflow: auto">
        <d-data-table
          #targetTable
          [dataSource]="basicTargetSource"
          [checkable]="true"
          (pageIndexChange)="targetChangePageContent($event)"
          (rowCheckChange)="targetRowCheckChange($event)"
          (checkAllChange)="targetCheckAllChange()"
        >
          <d-column [order]="1" field="id" header="ID" [width]="'50px'"></d-column>
          <d-column [order]="2" field="firstName" header="Name" [width]="'80px'"></d-column>
          <d-column
            [order]="3"
            field="dob"
            header="Date of birth"
            [fieldType]="'date'"
            [extraOptions]="{ dateFormat: 'MM/DD/YYYY' }"
            [width]="'100px'"
          ></d-column>
          <d-column [order]="4" field="gender" header="Gender" [width]="'100px'"></d-column>
        </d-data-table>
      </div>
    </ng-template>
  </d-transfer>
</div>
